<template>
  <div class='container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <div class="text-item">
        <el-form :model="testQuestions" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="学科：" prop="region" required>
            <el-select
              v-model="testQuestions.subject"
              placeholder="请选择活动区域"
              class="item-length"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="region" required>
            <el-select
              v-model="testQuestions.subject"
              placeholder="请选择活动区域"
              class="item-length"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="region" required>
            <el-select
              v-model="testQuestions.subject"
              placeholder="请选择活动区域"
              class="item-length"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="城市：">
          <el-select
            v-model="testQuestions.subject"
            placeholder="请选择"
            class="item-city"
          >
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
          <el-select
            v-model="testQuestions.subject"
            placeholder="请选择"
            class="item-city"
          >
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing"/>
          </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="region" required>
            <el-select
              v-model="testQuestions.subject"
              placeholder="请选择活动区域"
              class="item-length"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="region" required>
            <el-radio v-model="testQuestions.questionTypesRadio" label="1">单选</el-radio>
            <el-radio v-model="testQuestions.questionTypesRadio" label="2">多选</el-radio>
            <el-radio v-model="testQuestions.questionTypesRadio" label="3">简答</el-radio>
          </el-form-item>
          <el-form-item label="难度：" prop="region" required>
            <el-radio v-model="testQuestions.difficultyRadio" label="1">简单</el-radio>
            <el-radio v-model="testQuestions.difficultyRadio" label="2">一般</el-radio>
            <el-radio v-model="testQuestions.difficultyRadio" label="3">困难</el-radio>
          </el-form-item>
          <el-form-item label="题干：" required >
            <quill-editor
              v-model="testQuestions.articleBody"
              :options="editorOption"
            />
          </el-form-item>
          <!-- 单选 -->
          <div v-if="testQuestions.questionTypesRadio === '1'">
            <el-form-item label="选项：" prop="region">
                <el-radio
                  class="radio-check-simpleness"
                  v-model="testQuestions.answerRadio"
                  label="1"
                >
                  <span>A：</span>
                  <el-input
                    v-model="testQuestions.answerA"
                    class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-radio>
                <el-radio
                  class="radio-check-simpleness"
                  v-model="testQuestions.answerRadio"
                  label="2"
                >
                  <span>B：</span>
                  <el-input
                  v-model="testQuestions.answerB"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-radio>
                <el-radio
                  class="radio-check-simpleness"
                  v-model="testQuestions.answerRadio"
                  label="3"
                >
                  <span>C：</span>
                  <el-input
                  v-model="testQuestions.answerC"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-radio>
                <el-radio
                  class="radio-check-simpleness"
                  v-model="testQuestions.answerRadio"
                  label="4"
                >
                  <span>D：</span>
                  <el-input
                  v-model="testQuestions.answerD"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-radio>
                <el-button type="danger" disabled>+增加选项与答案</el-button>
            </el-form-item>
          </div>
          <!-- 多选 -->
          <div v-else-if="testQuestions.questionTypesRadio === '2'">
            <el-form-item label="选项：" prop="region">
                <el-checkbox
                  class="radio-check-simpleness"
                  label="1"
                >
                  <span>A：</span>
                  <el-input
                  v-model="testQuestions.answerA"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-checkbox>
                <el-checkbox
                  class="radio-check-simpleness"
                  label="2"
                >
                  <span>B：</span>
                  <el-input
                  v-model="testQuestions.answerB"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-checkbox>
                <el-checkbox
                  class="radio-check-simpleness"
                  label="3"
                >
                  <span>C：</span>
                  <el-input
                  v-model="testQuestions.answerC"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-checkbox>
                <el-checkbox
                  class="radio-check-simpleness"
                  label="4"
                >
                  <span>D：</span>
                  <el-input
                  v-model="testQuestions.answerD"
                  class="answer-text"
                  />
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    class="upload-img"
                  >
                    <span class="text">上传图片</span>
                    <i class="el-icon-circle-close" />
                  </el-upload>
                </el-checkbox>
                <el-button type="danger">+增加选项与答案</el-button>
            </el-form-item>
          </div>
          <el-form-item label="解析视频">
            <el-input
              v-model="testQuestions.subject"
              class="parsing-video"
            />
          </el-form-item>
          <el-form-item label="答案解析：" required >
              <quill-editor
                v-model="testQuestions.articleBody"
                :options="editorOption"
              />
          </el-form-item>
          <!-- 题目备注 -->
          <el-form-item label="题目备注:">
            <el-input
              type="textarea"
              v-model="testQuestions.subject"
            />
          </el-form-item>
          <el-form-item label="试题标签：" prop="region" required>
            <el-select
              v-model="testQuestions.subject"
              placeholder="请选择活动区域"
              class="parsing-video"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testQuestions: {
        subject: '',
        // 题型单选
        questionTypesRadio: '1',
        // 难度单选
        difficultyRadio: '1',
        // 富文本
        articleBody: '',
        // 答案单选
        answerRadio: '1',
        // 每个选项内容
        answerA: '',
        answerB: '',
        answerC: '',
        answerD: '',
        todo: 1
      },
      // 富文本
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['blockquote'],
              ['code-block', 'image', 'link']
            ]
          }
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  // 富文本
  ::v-deep .ql-editor {
    height: 200px;
  }
  // 答案
  .radio-check-simpleness {
    display: block;
    margin-top: 24px;
  }
  .answer-text {
    width: 300px;
    margin-bottom: 32px;
  }
  // 上传图片
  .upload-img {
    display: inline-block;
    position: relative;

    .el-icon-circle-close {
      position: absolute;
      top: -36px;
      right: -12px;
    }
  }
  ::v-deep .el-upload--picture-card {
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin-left: 12px;
    margin-top: -24px;
  }
  // 解析视频
  .parsing-video {
    width: 400px;
  }
  // 题目备注
  ::v-deep .el-textarea__inner {
    width: 400px;
    height: 96px;
  }
  // 特定框框的长度
  .item-length {
    width: 400px;
  }
  // 城市选择框
  .item-city {
    width: 198px;
    margin-right: 4px;
  }
</style>
